<template>
	<view class="">
		<view class="tab_Box" :style="{
			background:bgColor||'#FFFFFF'
		}">
			<view class="tab_list" v-for="(item,index) in arrs" :key="index">
				<view :class="value==index?'title_as':''" @click="onChange(index,item)"
					:style="{'font-size':fz||'28rpx',color:onColor(value,index,1)}">{{showItem(item)}}</view>
				<view :style="{background:onColor(value,index,2),width:width2||'46rpx' }" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		props: ['value', 'arrs', 'color', 'activeColor', 'itemColor', 'fz', 'width2', 'keyName', 'bgColor'],

		data() {
			return {

			}
		},

		mounted() {},
		methods: {
			showItem(item) {
				if (typeof item == "string") {
					return item
				} else {
					return item[this.keyName]
				}
			},
			onColor(value, index, type) {
				//type==2横条颜色type==1字体颜色
				if (value == index && type == 1) return this.activeColor ? this.activeColor : '#000000';
				if (value !== index && type == 1) return this.color ? this.color : '#999999';
				if (value == index && type == 2) return this.itemColor ? this.itemColor : '#318FFE';
				if (value !== index && type == 2) return 'rgba(0,0,0,0)';
			},
			onChange(indexs, item) {
				// this.value = indexs;
				let parems = {
					index: indexs,
					data: item
				}
				this.$emit('input', indexs)
				this.$emit('change', indexs)
			}
		}
	}
</script>

<style scoped>
	.tab_Box {
		text-align: center;
		display: flex;
		justify-content: space-around;
		background: #FFFFFF;
	}

	.tab_list {
		/* background: #FFFFFF; */
		font-size: 28rpx;
	}

	.tab_list>view:nth-child(1) {
		line-height: 70rpx;
	}

	.tab_list>view:nth-child(2) {
		height: 6rpx;
		margin: 0 auto;
		border-radius: 4rpx;
	}

	.title_as {
		transition: color 1s;
		font-weight: bold;
	}
</style>
